<template>
	<view class="big">
	<scroll-view scroll-y="false" class="swiper-scroll">
		<view class="content">
			<!-- <view class="geban1">隔板</view> -->
			<view class="numlist">
				<view class="num" :class="num == 1 ? 'gaoliang1' : ''" @tap="opentype(1)">
					<view class="img">
						<image src="/static/image/mount/1.png" mode="widthFix"></image>
					</view>
					<view class="name">自行车</view>
					<view class="price">1积分/月 &nbsp;&nbsp; 1砖石/月</view>
				</view>
				<view class="num" :class="num == 2 ? 'gaoliang1' : ''" @tap="opentype(2)">
					<view class="img">
						<image src="/static/image/mount/2.png" mode="widthFix"></image>
					</view>
					<view class="name">摩托车</view>
					<view class="price">1积分/月 &nbsp;&nbsp; 1砖石/月</view>
				</view>
				<view class="num" :class="num == 3 ? 'gaoliang1' : ''" @tap="opentype(3)">
					<view class="img">
						<image src="/static/image/mount/3.png" mode="widthFix"></image>
					</view>
					<view class="name">汽车</view>
					<view class="price">1积分/月 &nbsp;&nbsp; 1砖石/月</view>
				</view>
				<view class="num" :class="num == 4 ? 'gaoliang1' : ''" @tap="opentype(4)">
					<view class="img">
						<image src="/static/image/mount/4.png" mode="widthFix"></image>
					</view>
					<view class="name">跑车</view>
					<view class="price">1积分/月 &nbsp;&nbsp; 1砖石/月</view>
				</view>
				
				<view class="geban">隔板</view>
			</view>
		</view>
		
	</scroll-view>
	<view class="pay">
		<view class="pay1">砖石购买</view>
		<view class="pay2">积分兑换</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:0,
			}
		},
		methods: {
			opentype(id) {
				this.num = id;
			},
		}
	}
</script>
<style lang="scss">
	page,
	.page {
		background-color: #F2F2F2;
		// height: calc(100vh - 60rpx);
		// height: 100%;
		// height: 100vh;
	}
	.geban1{
		height: 120upx;
		color: #F2F2F2;
	}
	.geban{
		height: 460upx;
		color: #F2F2F2;
	}
	.swiper-scroll {
		// height: calc(100vh - 60rpx);
		height: 100%;
		// height: 100vh;
	}
	

	.content {
		width: 750rpx;
		// height: 100vh;
		// height: calc(100vh - 60rpx);
		// height: 100%;
		// overflow: auto;
	}
	.numlist{
		width: 710rpx;
		// height: calc(100vh - 60rpx);
		height: 100vh;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 10rpx 20rpx;
		// margin-bottom: 800rpx;
		.gaoliang1{
			border: 2rpx solid #C595FE !important;
		}
		.num{
			width: 290rpx;
			border: 2rpx solid #ffffff;
			background-color: #ffffff;
			color: #333333;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			text-align: center;
			.img{
				width: 200rpx;
				height: 200rpx;
				display: flex;
				align-items: center;
				margin: auto;
				image{
					width: 100%;
				}
			}
			.name{
				color: #1D1D1D;
				font-size: 28rpx;
				font-weight: bold;
				margin-top: 10rpx;
				margin-bottom: 20rpx;
			}
			.price{
				color: #333333;
				font-size: 24rpx;
			}
		}
	}
	.pay{
		position: sticky;
		z-index: 999;
		bottom: 0rpx;
		width: 690rpx;
		height: 60rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
		padding: 30rpx;
		.pay1,.pay2{
			color: #ffffff;
			font-size: 28rpx;
			border-radius: 40rpx;
			padding: 16rpx 100rpx;
		}
		.pay1{
			background-color: #5FC3FE;
		}
		.pay2{
			background-color: #C694FE;
		}
	}
</style>
